<template>
	<view>
		<image class="bg" :src="apifun.serveimg+'paysuccess.png'" mode=""></image>
		<page-head :title="'模拟考试'" :headtype="1"></page-head>
		<view class="ksdata marginAuto">
			<view class="kscharts">
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				<view class="kschartstxt" v-if="grade < 90">很遗憾，考试不及格！</view>
				<view class="kschartstxt" v-if="90 <= grade && grade < 100">恭喜你，考试及格！</view>
				<view class="kschartstxt" v-if="grade == 100">哇~好棒；考满分耶！</view>
			</view>
			<view class="ksdatanum flex">
				<view class="ksdatanumeach" style="width:23%;">
					<view class="ksdatanumnum">{{ ksresult.successnum }}</view>
					<view class="ksdatanumtxt">回答正确</view>
				</view>
				<view class="ksdatanumeach" style="width:23%;">
					<view class="ksdatanumnum">{{ ksresult.errnum }}</view>
					<view class="ksdatanumtxt">回答错误</view>
				</view>
				<view class="ksdatanumeach" style="width:23%;">
					<view class="ksdatanumnum">{{ ksresult.nonum }}</view>
					<view class="ksdatanumtxt">未回答</view>
				</view>
				<!-- <view class="ksdatanumeach" style="width:29%;">
					<view class="ksdatanumnum">69</view>
					<view class="ksdatanumtxt">总用时（分钟）</view>
				</view> -->
			</view>
		</view>
		<view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="再考一次" @click="anewfun()" :customStyle="{
				'background':'#1686F8',
				'color':'#fff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view>
		<view class="gohome" @click="gohome()">返回首页></view>
	</view>
</template>
<style scoped lang="scss">

</style>
<script>
	export default {
		data() {
			return {
				apifun: this.apifun,
				ksresult:{},
				chartData: {},
				grade:0,
				opts: {
					color: ["#FF520E", "#CECECE"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
					},
					title: {
						name: "",
					},
					subtitle: {
						name:'',
						fontSize:18,
						color: "#FC2A2A"
					},
					extra: {
						ring: {
							ringWidth:20,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			};
		},
		onLoad() {
			let ksresult = uni.getStorageSync('ksresult');
			this.ksresult = ksresult;
			this.grade = parseInt(ksresult.successnum*100/ksresult.alldatanum);
			this.opts.subtitle.name = this.grade+'分'
			this.getServerData();
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					let res = {
						series: [{
							data:[{
								"name": "",
								"value": this.ksresult.successnum
							}, {
								"name": "",
								"value":parseInt(this.ksresult.alldatanum - this.ksresult.successnum)
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			gohome(){  // 返回首页
				uni.reLaunch({
					url:'/pages/tabbar/home'
				})
			},
			anewfun() { // 再考一次
				uni.reLaunch({
					url:'/pages/tabbar/home'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 0;
		width: 100vw;
		height: 100vh;
	}

	// 
	.ksdata {
		position: relative;
		width: 690rpx;
		height: 380rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-top: 200rpx;

		.kscharts {
			position: absolute;
			top: -140rpx;
			left: 50%;
			width: 280rpx;
			height: 280rpx;
			margin-left: -140rpx;
			border-radius: 50%;
			background: #fff;
			.kschartstxt{
				position: relative;
				top: -10rpx;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
			}
		}

		.ksdatanum {
			position: absolute;
			width: 100%;
			bottom: 50rpx;
			justify-content: space-between;

			.ksdatanumeach {
				.ksdatanumnum {
					line-height: 80rpx;
					text-align: center;
					font-size: 40rpx;
					color: #222222;
				}

				.ksdatanumtxt {
					line-height: 50rpx;
					text-align: center;
					color: #666666;
					font-size: 28rpx;
				}
			}
		}
	}

	// 
	.gohome {
		position: relative;
		z-index: 10;
		margin-top: 50rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		text-align: center;
		color: #0089FB;
	}
</style>